<template>
  <view class="container">
    <view class="header">
      <view class="uni-list-cell-db time">
        <picker mode="date" :value="date" @change="bindDateChange" fields="month">
          <view class="uni-input">{{formatDate}} ^</view>
        </picker>
      </view>
      <view class="uni-list-cell-db time" style="margin-left: 20rpx;">
        <picker :range="range" :value="index" @change="bindfilterChange">
          <view class="uni-input">{{range[index]}} ^</view>
        </picker>
      </view>
    </view>
    <view class="body">
      <view class="item" v-for="item in issueList" :key="item.id">
        <view class="item-issue-time">发布时间：：{{item.createTime}}</view>
        <view class="item-main">
          <text v-if="item.userName">姓名: {{item.userName}}</text>
          <text v-if="item.phone">手机号码: {{item.phone}}</text>
          <text v-if="item.materialType">物品类型: {{item.materialType}}</text>
          <text v-if="item.carType">车辆类型: {{item.carType}}</text>
          <text v-if="item.idealPrice">理想价格: {{item.idealPrice}}</text>
          <text v-if="item.carRequire">车辆要求: {{item.carRequire}}</text>
          <text v-if="item.departure">出发地: {{item.departure}}</text>
          <text v-if="item.destination">目的地: {{item.destination}}</text>
          <text v-if="item.crossCountry">能去的国家: {{item.crossCountry}}</text>
          <text v-if="item.crossCity">能去的城市: {{item.crossCity}}</text>
          <text v-if="item.carAddress">当前车辆所在地: {{item.carAddress}}</text>
          <text v-if="item.carNumber">被运车辆数量: {{item.carNumber}}</text>
          <text v-if="item.remark">备注: {{item.remark}}</text>
        </view>
      </view>

    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        date: new Date().toLocaleDateString(),
        issueList: [],
        range: ['筛选', '发散货', '拼散车', '货源信息', '车辆信息'],
        index: 0,
        isLoading: false,
        pageNum: 1,
        pageSize: 10,
        total: 0
      };
    },
    onLoad() {
      this.getIssueHistory()
    },
    computed: {
      formatDate() {
        return this.formatDateFun(this.date)
      }
    },
    methods: {
      formatDateFun(time) {
        const date = new Date(time)
        const year = date.getFullYear()
        const month = (date.getMonth() + 1 + '').padStart(2, '0')
        return year + '-' + month
      },
      // 日期筛选
      bindDateChange(e) {
        this.date = e.detail.value
        this.getIssueHistory()
      },
      // 赛选
      bindfilterChange(e) {
        this.index = e.detail.value
        this.issueList = []
        this.getIssueHistory(this.index)
      },
      // 得到发布记录列表
      async getIssueHistory() {
        this.isLoading = true
        uni.showLoading({
          title: '加载中...'
        })
        const res = await uni.gRequest.get('/app/demand/list', {
          createTime: this.formatDate,
          type: this.index ? this.index : '',
          pageSize: this.pageSize,
          pageNum: this.pageNum
        })
        this.issueList = [...this.issueList, ...res.rows] || []
        // 实现分页功能
        this.total = res.total
        this.isLoading = false
        uni.hideLoading()
      }
    },
    // 触底刷新
    onReachBottom() {
      if (this.isLoading) return
      if (this.pageNum * this.pageSize >= this.total) {
        return uni.showToast({
          title: '已加载到底部...',
          duration: 500,
          icon: 'none'
        })
      }
      this.pageNum++
      this.getIssueHistory()
    }
  }
</script>

<style lang="scss">
  .container {
    padding: 0 30rpx;
  }

  .header {
    border-top: 1rpx #eee solid;
    padding: 30rpx;

    .time {
      display: inline-block;
      border-radius: 10rpx 10rpx 10rpx 10rpx;
      border: 1rpx solid #999999;
      padding: 12rpx 18rpx;
    }
  }

  .body {}

  .item {
    box-shadow: 0rpx 1rpx 20rpx 0rpx rgba(182, 182, 182, 0.15);
    border-radius: 10rpx 10rpx 10rpx 10rpx;
    padding: 40rpx 30rpx;
    font-size: 26rpx;
    color: #999999;
    margin-bottom: 30rpx;


    .item-issue-time {
      padding: 0 0 40rpx;
      border-bottom: 1rpx #999 dotted;
    }

    .item-main {
      font-size: 26rpx;
      color: #000000;
      display: flex;
      flex-direction: column;
      justify-content: center;

      text {
        margin-top: 24rpx;
      }
    }
  }
</style>
